<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="查询日期">
              <a-range-picker :format="dateFormat" v-model="createTimeArr" @change="onCalendarChange" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="支付方式">
              <a-select placeholder="请选择" v-model="queryParam.chargeType">
                <a-select-option :value="item.val" v-for="item in payWayList" :key="item.key">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="submitQuery">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <s-table :columns="columns" :data="loadData" ref="table">
      <span slot="chargeType" slot-scope="chargeTypeTxt">{{ chargeTypeTxt | chargeTypeFilter }}</span>
      <template slot="totalMoney" slot-scope="text, record">
        <span>{{ calcTotalMoney(record) }}</span>
      </template>
    </s-table>
  </a-card>
</template>

<script>
import STable from '@/components/table/'
import Dict from '@/config/dict.conf'
import { getIncomeList } from '@/api/api'
import { pageQueryConvert } from '@/utils/util'

export default {
  name: 'TableList',
  components: {
    STable
  },
  data() {
    return {
      payWayList: Dict.payWayList,
      dateFormat: 'YYYY-MM-DD',
      createTimeArr: [],

      // 查询参数
      queryParam: {},

      //过滤条件
      isorter: {
        column: 'createTime',
        order: 'desc'
      },

      // 表头
      columns: [
        {
          title: '通道ID',
          dataIndex: 'id'
        },
        {
          title: '日期',
          dataIndex: 'createTime'
        },
        {
          title: '通道',
          dataIndex: 'chargeType',
          scopedSlots: { customRender: 'chargeType' }
        },
        {
          title: '面值',
          dataIndex: 'money',
          customRender: text => '￥' + text
        },
        {
          title: '提成比例',
          dataIndex: 'royaltyRatio',
          customRender: text => text + ' %'
        },
        {
          title: '条数',
          dataIndex: 'count'
        },
        {
          title: '小计',
          dataIndex: 'totalMoney',
          scopedSlots: { customRender: 'totalMoney' }
        }
      ],

      // 向后端拉取可以用的操作列表
      incomeList: null,

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        let params = Object.assign({}, parameter, this.queryParam, this.isorter)

        for (let p in params) {
          if (params[p] == -1 || params[p] == '-1') params[p] = undefined
        }

        return getIncomeList(params).then(res => {
          return pageQueryConvert(res)
        })
      },

      selectedRowKeys: [],
      selectedRows: []
    }
  },
  filters: {
    /**
     * 支付通道转换过滤
     */
    chargeTypeFilter(chargeType) {
      let chargeTypeList = Dict.payWayList || []
      let txt = ''
      for (let c in chargeTypeList) {
        let ct = chargeTypeList[c]
        if (ct.val == chargeType) {
          txt = ct.name
          break
        }
      }
      return txt
    }
  },
  created() {},
  methods: {
    /**
     * 主动查询
     */
    submitQuery(e) {
      let paramsKeyList = Object.keys(this.queryParam)

      if (paramsKeyList.length == 0) {
        this.$message.warning('查询条件不能全为空')
        return
      }

      let params = Object.assign({}, { current: 1, pageSize: 10 }, this.isorter)
      this.$refs.table.loadData(params, {}, null)
    },

    /**
     * 动态计算金额小计
     */
    calcTotalMoney(record) {
      let sku_money = Number(record.money) //100倍
      let count = Number(record.count || 1)
      let rate = Number(record.royaltyRatio) / 100
      let real_money = sku_money * rate * count
      return '￥' + real_money.toFixed(2)
    },

    /**
     * 日期选择
     */
    onCalendarChange(dArr, dsArr) {
      let createTime_begin = dsArr[0]
      let createTime_end = dsArr[1]
      console.log(dsArr)
      if (createTime_begin) this.queryParam.createTime_begin = createTime_begin
      else delete this.queryParam['createTime_begin']
      if (createTime_end) this.queryParam.createTime_end = createTime_end
      else delete this.queryParam['createTime_end']
    },

    resetSearchForm() {
      this.queryParam = {}
      this.createTimeArr = []
    }
  }
}
</script>
